<template>
	<view class="user bg-white  flex flex-direction  clearfix ">
		<cu-custom bgColor="bg-white " isBack >
			<block slot="content">申诉</block>
		</cu-custom>
		<view class="bg-f7  wp100"></view>
		<view  class="bg-white mb10">
			<view class="flex align-center justify-between  py15 bb1  px15">
				<view class=" flex align-center ">
					<view class="text-danger  f16 ">*</view>
					<view class="f16  ml5">申诉原因</view>
				</view>
				<input class="text--right f14 " v-model="name" placeholder-class="text-info" placeholder="请填写申诉原因"   />
			</view>
			<view class="flex align-center justify-between  py15 bb1  px15">
				<view class=" flex align-center ">
					<view class="text-danger  f16 ">*</view>
					<view class="f16  ml5">申诉描述</view>
				</view>
			</view>
			<view class="flex align-center justify-start  py15 bb1  px15">
				<textarea class="text-left f14 " maxlength="300" v-model="desc" placeholder-class="text-info" placeholder="请填写申诉描述"></textarea>
			</view>
			<view class="flex align-center justify-between  py5 mt10  px15">
				<view class=" flex align-center ">
					<view class="text-danger  f16 ">*</view>
					<view class="f16  ml5">上传申诉凭证</view>
				</view>
			</view>
			<view class="cu-form-group mt10">
				<view class="grid  grid-square flex-sub">
					<view class="block105" v-for="(item, index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
						<image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"><text class="cuIcon-close"></text></view>
					</view>
					<view class="solids block105" @tap="ChooseImage" v-if="imgList.length < 1"><text class="cuIcon-add "></text></view>
				</view>
			</view>
			<view class="px20 mt20">
				<button @click="tijiao" class="button-jianbian    f16 text-white boxsq  discenter ">提交申请</button>
			</view>
		</view>
	</view>
</template>
<script>
import uploadFile from '@/mixins/uploadFile'
import { mapState, mapActions } from 'vuex'
export default {
	mixins: [uploadFile],
	
	data() {
		return {
			imgList: [],
			imga:'',
			name:'',
			desc:'',
			id:''
		}
	},
	computed: {
		...mapState(['token', 'userInfo', 'update', 'baseURL','storeinformation','shopfenlei']),
	},
	onLoad(e) {
		this.id=e.id
	},
	methods: {
		...mapActions(['setStoreaddress','setUpdate','getUser']),
		async tijiao() {
			if (this.name == '') {
				uni.showToast({
					title: '请填写申诉原因',
					delta: 1500,
					icon: 'none'
				})
				return false
			}
			if (this.desc == '') {
				uni.showToast({
					title: '请填写申诉描述',
					delta: 1500,
					icon: 'none'
				})
				return false
			}
			
			if (this.imgList.length < 1) {
				uni.showToast({
					title: '请上传申诉凭证',
					delta: 1500,
					icon: 'none'
				})
				return false
			}
			if (this.imgList) {
				let {
					data: { updateToken, updateUrl, prefixUrl }
				} = await this.$http.post('user.getQnToken', {}, { tipConfig: { storeLoading: true } })
				let img = await this.qnUploadFile({ url: updateUrl, prefixUrl, files: this.imgList, formData: { token: updateToken } })
				this.imga = img[0]
			}
			let params = {
				name: this.name,
				desc:this.desc,
				img:this.imga,
				orderId:this.id
			}
			await this.$http.post('order.shensu', params, { tipConfig: { storeLoading:true,isSuccessTip: true, isSuccessBack: true, navigateBack: 1 },
			})
		},
		ChooseImage() {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: res => {
					if (this.imgList.length != 0) {
						this.imgList = this.imgList.concat(res.tempFilePaths)
					} else {
						this.imgList = res.tempFilePaths
					}
				}
			})
		},
		ViewImage(e) {
			uni.previewImage({
				urls: this.imgList,
				current: e.currentTarget.dataset.url
			})
		},
		DelImg(e) {
			uni.showModal({
				content: '删除此图？',

				success: res => {
					if (res.confirm) {
						this.imgList.splice(e.currentTarget.dataset.index, 1)
					}
				}
			})
		},
	}
}
</script>

<style lang="less">
.mw100{
	min-width: 200rpx;
}
.block105{
	width: 210rpx;
	height: 210rpx;
}
.bg-f7{
	background-color: #F7F7F7;
	height: 20rpx;
}
.boxsq{
	height: 92rpx;
	border-radius: 50rpx;
}
.text--right{
	text-align: right;
}
.mengceng{
	width: 100%;
	height: 100%;
	position: fixed;
	top:0;
	left: 0;
	background-color: #050505;
	opacity: 0.5;
	z-index:131;
}
.bg-mengceng{
	background-color: #050505;
	opacity: 0.5;
}
.choice-box{
	width: 100%;
	background-color: #FFFFFF;
	position: fixed;
	bottom: 0;
	z-index: 802;
}
</style>
